<template>
  <div class="flex flex-col h-full">
    <!-- 表格部分 -->
    <div class="flex-1 overflow-auto">
      <el-table
        ref="tableRef"
        :data="reportData"
        style="width: 100%"
        :header-cell-style="{ backgroundColor: '#f5f7fa', color: '#606266' }"
      >
        <el-table-column prop="date" label="Date" width="120" align="center" />
        <el-table-column
          label="Solar Production(kWh)"
          min-width="150"
          align="center"
        >
          <template #default="scope">
            {{ formatNumber(scope.row.solarProduction) }}
          </template>
        </el-table-column>
        <el-table-column
          label="Home Consumption(kWh)"
          min-width="160"
          align="center"
        >
          <template #default="scope">
            {{ formatNumber(scope.row.homeConsumption) }}
          </template>
        </el-table-column>
        <el-table-column
          label="Battery Charge(kWh)"
          min-width="150"
          align="center"
        >
          <template #default="scope">
            {{ formatNumber(scope.row.batteryCharge) }}
          </template>
        </el-table-column>
        <el-table-column
          label="Battery Discharge(kWh)"
          min-width="160"
          align="center"
        >
          <template #default="scope">
            {{ formatNumber(scope.row.batteryDischarge) }}
          </template>
        </el-table-column>
        <el-table-column
          label="Export to Grid(kWh)"
          min-width="150"
          align="center"
        >
          <template #default="scope">
            {{ formatNumber(scope.row.exportToGrid) }}
          </template>
        </el-table-column>
        <el-table-column
          label="Import from Grid(kWh)"
          min-width="160"
          align="center"
        >
          <template #default="scope">
            {{ formatNumber(scope.row.importFromGrid) }}
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 分页 -->
    <div class="flex items-center justify-end py-4">
      <el-pagination
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        background
        :page-sizes="[10, 20, 50, 100]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pagination.total"
        @size-change="handleSizeChange"
        @current-change="handlePageChange"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
import { ElTable } from "element-plus";
import { ref, watch } from "vue";
// 定义报表数据类型
interface ReportItem {
  id: string;
  date: string;
  solarProduction: number;
  homeConsumption: number;
  batteryCharge: number;
  batteryDischarge: number;
  exportToGrid: number;
  importFromGrid: number;
}

const props = defineProps({
  reportData: {
    type: Array as () => ReportItem[],
    required: true,
    default: () => []
  },
  pagination: {
    type: Object,
    required: true,
    default: () => ({
      total: 0,
      currentPage: 1,
      pageSize: 10
    })
  }
});

const emit = defineEmits(["page-change", "size-change"]);

// 本地当前页引用，用于v-model绑定
const currentPage = ref(props.pagination.currentPage);
const pageSize = ref(props.pagination.pageSize);

// 格式化数字
const formatNumber = (value: number): string => {
  return value.toFixed(2);
};

const handlePageChange = (page: number) => {
  emit("page-change", page);
};

const handleSizeChange = (size: number) => {
  emit("size-change", size);
};

// 监听 props 变化
watch(
  () => props.pagination.pageSize,
  newVal => {
    pageSize.value = newVal;
  }
);

// 表格引用
const tableRef = ref<typeof ElTable | null>(null);
</script>

<style scoped lang="scss">
/* 调整分页组件样式 */
:deep(.el-pagination) {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

:deep(.el-pagination .el-pagination__total) {
  margin-right: auto;
}

:deep(.el-pagination .el-pagination__jump) {
  margin-left: auto;
}

// 取消分页器非活跃按钮的背景色
:deep(.el-pagination .el-pager li) {
  background-color: transparent;
}
</style>
